<template>
	<div class="sys-pos-container">
		<el-card shadow="hover">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item :label-width='70' label="Pid" prop="pid">
					<el-input placeholder="Pid" clearable class='ml10' @keyup.enter="handleQuery"
						v-model="state.queryParams.pid" />
				</el-form-item>
				<el-form-item label='日期'>
					<el-date-picker class='ml10' v-model='state.UTCDateRange' type='daterange' range-separator='至'
						start-placeholder='开始日期' end-placeholder='结束日期' :shortcuts='shortcuts'
						@keyup.enter="handleQuery" />
				</el-form-item>
				<el-form-item :label-width='70' label="客户">
					<el-select :clearable='true' class='ml10' v-model="state.queryParams.customerId" placeholder="请选择"
						filterable>
						<el-option v-for='item in state.customerDict' :key='item.value' :label='item.label'
							:value='item.value' />
					</el-select>
				</el-form-item>
				<el-form-item :label-width='70' label='省份'>
					<el-select :clearable='true' class='ml10' v-model='state.queryParams.province' placeholder='请选择'
						filterable>
						<el-option v-for='item in optionDict.provinceDict' :key='item.value' :label='item.label'
							:value='item.value' />
					</el-select>
				</el-form-item>
				<el-form-item :label-width='70' label="产品名称" prop="productName">
					<el-input placeholder="产品名称" clearable class='ml10' @keyup.enter="handleQuery"
						v-model="state.queryParams.productName" />
				</el-form-item>
				<!-- <el-form-item :label-width='70' label="手机号码" prop="phone">
					<el-input placeholder="手机号码" clearable class='ml10' @keyup.enter="handleQuery"
						v-model="state.queryParams.phone" />
				</el-form-item> -->
				<el-form-item>
					<el-button-group>
						<el-button :loading='state.loading' type="primary" icon="ele-Search" @click="handleQuery" v-auth="'diDailyReport:query'">
							查询
						</el-button>
					</el-button-group>
				</el-form-item>
				<el-form-item>
					<el-button :loading='state.loading' icon="ele-FolderOpened" @click.stop.prevent="exportExcel" v-auth="'diDailyReport:query'"> 导出
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="hover" style="margin-top: 8px">
			<el-table :data="state.data" style="width: 100%" v-loading="state.loading" border stripe
				highlight-current-row>
				<el-table-column header-align="center" type="index" label="序号" width="55" align="center" />
				<el-table-column header-align='center' prop='byYMD' label='日期' width="200" align="center">
					<template #default='scope'>
						{{ scope.row.createAt.split(' ')[0] + ' ' + scope.row.createAt.split(' ')[1].split(':')[0] +
				'时' }}
					</template>
				</el-table-column>

				<el-table-column header-align='center' prop="pid" label="PID" show-overflow-tooltip width="200" />
				<el-table-column header-align='center' prop="customerName" label="客户名称" align="left"
					show-overflow-tooltip width="100" />

				<el-table-column header-align='center' prop="productName" label="产品名称" show-overflow-tooltip
					align="left" />
				<el-table-column header-align='center' prop="province" width="82" label="省份" show-overflow-tooltip align="center"
					 />
				<el-table-column header-align='center' prop="platformId" label="运营商" show-overflow-tooltip
					align="center" width="100">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.platformId == 1">移动</el-tag>
						<el-tag type="warning" v-else-if="scope.row.platformId == 2">联通</el-tag>
						<el-tag type="info" v-else-if="scope.row.platformId == 3">电信</el-tag>
						<el-tag type="error" v-else-if="scope.row.platformId == 4">广电</el-tag>
						<el-tag type="success" v-else-if="scope.row.platformId == 5">移动虚拟运营商</el-tag>
						<el-tag type="warning" v-else-if="scope.row.platformId == 6">联通虚拟运营商</el-tag>
						<el-tag type="info" v-else-if="scope.row.platformId == 7">电信虚拟运营商</el-tag>
						<el-tag type="error" v-else>未知</el-tag>
					</template>
				</el-table-column>
				<el-table-column header-align='center' prop="requestCount" label="请求数" width="100" show-overflow-tooltip
					align="right" />
				<el-table-column header-align='center' prop="orderCount" label="订单数" show-overflow-tooltip width="100"
					align="right" />
				<el-table-column header-align='center' label="转化率%" width="100" show-overflow-tooltip align="right">
					<template #default='scope'>
						<!-- {{ ((Number(scope.row.orderCount) / Number(scope.row.requestCount)) * 100).toFixed(2) }} -->
						<el-text :type='((Number(scope.row.orderCount) / Number(scope.row.requestCount)) * 100).toFixed(0) <= 20 ? "danger" : "success"'> {{ ((Number(scope.row.orderCount) / Number(scope.row.requestCount)) * 100).toFixed(2) }}</el-text>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
				:page-sizes="[20, 50, 100]" v-model:current-page="state.queryParams.pageNum" background
				v-model:page-size="state.queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="state.total"></el-pagination>
		</el-card>
	</div>
</template>

<script lang="ts" setup name="diHourlyReport">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import mittBus from '/@/utils/mitt';
import { convertLocalDate, datePickerShortcuts } from '/@/utils/formatTime';
import { DiDailyReport } from '/@/api/models';
import SysDiCustomerApi from '/@/api/delivery/customer';
import SysDiDailyReportApi from '/@/api/delivery/hourlyReport';
import { optionDict } from '/@/const/dict.ts';
import { getFileName, downloadByData } from '/@/utils/download';
// 定义变量内容.
const shortcuts = datePickerShortcuts();
const state = reactive({
	loading: false,
	data: [] as Array<DiDailyReport>,
	UTCDateRange: [new Date(), new Date()],
	total: 0 as any,
	queryParams: {
		pid: undefined,
		dateRange: [],
		pageNum: 1,
		pageSize: 20,
		customerId: undefined,
		province: undefined,
		productName: undefined,
		phone: undefined,
	},
	editTitle: '',
	customerDict: [],
});
//
onMounted(async () => {
	handleQuery();

	mittBus.on('submitRefresh', () => {
		handleQuery();
	});
	await customerDictQuery();
});

onUnmounted(() => {
	mittBus.off('submitRefresh');
});

const formatLocalDate = async () => {
	if (state.UTCDateRange[0] as string)
		state.UTCDateRange[0] = new Date(state.UTCDateRange[0]);
	if (state.UTCDateRange[1] as string)
		state.UTCDateRange[1] = new Date(state.UTCDateRange[1]);

	if (state.UTCDateRange)
		state.queryParams.dateRange = [convertLocalDate(state.UTCDateRange[0]), convertLocalDate(state.UTCDateRange[1])];
	else
		state.queryParams.dateRange = [];
}

// 查询操作
const handleQuery = async () => {
	state.loading = true;
	await formatLocalDate();
	const res = await SysDiDailyReportApi().queryRecord(state.queryParams);
	state.data = res.data.result.items ?? [];
	state.total = res.data.result?.total;
	state.loading = false;
};

// 导出日志
const exportExcel = async () => {
	await formatLocalDate();
	let params = Object.assign(state.queryParams);
	SysDiDailyReportApi().exportExcel(params).then((res) => {
		state.loading = true;
		// console.log("excel.." + JSON.stringify(res));
		const fileName = getFileName(res.headers);
		downloadByData(res.data as any, fileName);
		var set = setTimeout(()=>{
			state.loading = false;
			clearTimeout(set);
		},1500)
	});
};

// 分页改变
const onHandleSizeChange = (val: number) => {
	// console.log(1)
	state.queryParams.pageSize = val;
	handleQuery();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	// console.log(val);
	state.queryParams.pageNum = val;
	handleQuery();
};

// 业务列表
const customerDictQuery = async () => {
	await SysDiCustomerApi().queryAll({}).then((res) => {
		if (res.data.resCode === '0000')
			state.customerDict = res.data.result ?? [];
	});
};

</script>
